<template>
  <h1 class="projectName" :style="{ backgroundColor: bgColor }">侧边导航栏</h1>
  <el-menu default-active="1" class="el-menu-vertical-demo" :style="{ backgroundColor: bgColor }">
    <el-menu-item index="1">
      <span><router-link to="/">图表展示</router-link></span>
    </el-menu-item>
    <el-menu-item index="2">
      <span><router-link to="/dataShow">数据渲染</router-link></span>
    </el-menu-item>
    <el-menu-item index="3">
      <span><router-link to="/cartShow">数据展示</router-link></span>
    </el-menu-item>
    <el-menu-item index="4" v-if="userStore.userInfo && userStore.userInfo.power === '1'">
      <span><router-link to="/manage">权限管理</router-link></span>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { inject } from 'vue';
import { useUserStore } from '@/stores/userStore';

// 注入数据
const bgColor = inject('bgColor');

const userStore = useUserStore()


/*
  ---
    以下废弃
  ---
*/
// import { defineProps } from 'vue';

// // 定义接收的 props
// const props = defineProps({
//   bgColor: {
//     type: String,
//     default: '#ffffff' // 默认背景颜色
//   }
// });


</script>

<style scoped>
/* 为项目名称添加样式 */
.projectName {
  text-align: center;
}

/* 修改侧边导航栏背景颜色 */
/* .el-menu-vertical-demo {
  /* background-color: aqua; */
/* } */


/* 去除超链接样式 */
a {
  text-decoration: none;
}
</style>